<template>
  <div
    class="toast-box"
    ref="toastBoxRef"
    :class="toastClass"
  >
    <div class="toast-box-shadow-inner">
        <!-- 用于占位 -->
        <div class="cur-hidden">
            <img
          class="icon"
          src="@/assets/image/SVG/AISEO_LOGO.svg"
          alt=""
          style=""
        />
        <span class="toast-text ml-24 pr-16">{{ currentCopy }}</span>
        </div>
      <div class="toast-box-info">
        <img
          class="icon"
          src="@/assets/image/SVG/AISEO_LOGO.svg"
          alt=""
          style=""
        />
        <span class="toast-text ml-24 pr-16">{{ currentCopy }}</span>
      </div>
      <div class="toast-box-inner" ref="toastBoxInnerRef"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import clipboard from "clipboard";
const toastClass = ref("");
const currentCopy = ref("");
const toastBoxRef = ref();
const toastBoxInnerRef = ref();
let timer1 = null
let timer2 = null
let timer3 = null

const copyText = (toastText = "", text) => {
  currentCopy.value = toastText;
  if (text) {
    clipboard.copy(text);
  }
  //执行弹框动画
  toastBoxRef.value.style.display = "flex";
  toastBoxInnerRef.value.style.display = "none";
  toastClass.value = "toast-box-animal";
  clearTimeout(timer1)
  clearTimeout(timer2)
  clearTimeout(timer3)

  timer1 = setTimeout(() => {
    toastBoxInnerRef.value.style.display = "block";
    timer2 = setTimeout(() => {
      toastClass.value = "toast-box-animal-out";
      timer3 = setTimeout(() => {
        toastBoxRef.value.style.display = "none";
        toastClass.value = "";
      }, 500);
    }, 3000);
  }, 500);
};
defineExpose({
  copyText,
});
</script>

<style lang="scss" scoped>
.toast-box {
  z-index: 9999;
  width: max-content;
//   width: 400px;
  height: 40px;
  border: 1px dotted #ec8b94;
  border-radius: 12px;
  position: fixed;
  left: 50%;
  // bottom: -260px;
  bottom: 80px;
  transform: translateX(-50%);
  align-items: center;
  justify-content: center;
  font-family: Alibaba PuHuiTi-Medium;
  font-weight: 500;
  font-size: 18px;
  color: #1a1a1a;
  display: none;
  box-shadow: 0px 1 2px 0px rgba(230, 46, 61, 0.12);
  padding: 4px;
//   background: #f5f5f5;

  .toast-box-shadow-inner {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: #f5f5f5;
    box-shadow: 0px 0 5px 0px rgba(128, 13, 22, 0.16);
    font-weight: 500;
    font-size: 18px;
    color: #333333;
    font-family: Alibaba PuHuiTi-Medium;
    line-height: 36px;
    position: relative;
    overflow: hidden;
  }
  .cur-hidden{
    opacity: 0;
    padding-left: 16px;
  }
  .toast-box-info {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    // justify-content: space-evenly;
    font-weight: 500;
  }
  img {
    width: 40px;
    height: 20px;
    margin-right: 14px;
  }
  .toast-box-inner {
    background: #ffffff;
    // width: 100%;
    width: 70px;
    height: 100%;
    line-height: 38px;
    border-radius: 10px;
    position: absolute;
    top: 0px;
    left: 0px;
    animation: toast-box-inner-animal 3s;
    overflow: hidden;
    display: none;
    box-shadow: 0px 0 5px 0px rgba(128,13,22,0.16);
    span {
      position: absolute;
      left: 100px;
      white-space: nowrap;
    }
  }
}
.toast-box-animal {
  animation: toast-box-animal-coming 0.5s;
}
@keyframes toast-box-animal-coming {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 80px;
    opacity: 1;
  }
}
.toast-box-animal-out {
  animation: toast-box-animal-out 1s;
}
@keyframes toast-box-animal-out {
  from {
    bottom: 80px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}
@keyframes toast-box-inner-animal {
  /* from表示动画开始位置 也可以使⽤0%*/
  from {
    width: calc(100% - 6px);
  }
  /* to动画的结束位置 也可以使⽤100%*/
  to {
    width: 70px;
  }
}
@keyframes toast-box-animal {
  /* from表示动画开始位置 也可以使⽤0%*/
  0% {
    bottom: -300px;
    opacity: 0;
  }
  50% {
    bottom: -260px;
    opacity: 1;
  }
  /* to动画的结束位置 也可以使⽤100%*/
  100% {
    bottom: -340px;
    opacity: 0;
  }
}
</style>
